<template>
    <ul class="collection-bar">
        <li class="collection-box">
            <router-link to='/favorites'>
            <div>9</div>
            <div>收藏夹</div>
            </router-link>
        </li>
        <li class="collection-box">
            <div>1</div>
            <div>关注店铺</div>
        </li>
        <li class="collection-box">
            <router-link to='/footprint'>
            <div>163</div>
            <div>足迹</div>
            </router-link>
        </li>
        <li class="collection-box">
            <div>0</div>
            <div>红包卡券</div>
        </li>
    </ul>
</template>

<script>
export default {
    name: "FunctionBar",
    
}
</script>

<style scoped>
    .collection-bar {
        display: flex;
        padding: 0 15px;
        justify-content: space-between;
        margin: 20px 10px;
    }
    .collection-box {
        text-align: center;
    }
    .collection-box div {
        font-size: 14px;
    }
    .collection-box div:nth-child(2) {
        color: #858585;
    }
    .collection-box div:nth-child(1) {
        color: #111111;
    }
</style>